.banner {
  position: relative;
}

.banner img {
  width: 100%;
  /* 使用min-width，这个属性表示最小宽度*/
  min-width: 1152px;
  /* 图片可能和盒子的底部产生一些小缝隙，此时可以使用一个小技巧 */
  /* 这个一个小技巧，添加上之后，图片就不会出现小缝隙 */
  vertical-align: middle;
}

.banner .center-wrap {
  /* 只要压盖，第一时间就要想到绝对定位 */
  position: absolute;
  top: 0;
  left: 0;
  width: 1152px;
  left: 50%;
  margin-left: -576px;
  height: 100%;
}

.banner .center-wrap .banner-nav {
  /* 注意这里的100也是非常重要，因为如果省略了，他的height就是0 */
  /* 那么他的子盒子设置16.6%就没有了意义 */
  height: 100%;
}

.banner .center-wrap .banner-nav ul {
  /* 注意这里的100也是非常重要，因为如果省略了，他的height就是0 */
  /* 那么他的子盒子设置16.6%就没有了意义 */
  height: 100%;
}

.banner .center-wrap .banner-nav ul li {
  height: 16.66%;
  width: 296px;
  background-image: linear-gradient(to bottom, red, blue);
}

.banner .center-wrap .leftbtn {
  position: absolute;
  width: 28px;
  height: 44px;
  /* 使用精灵图片 */
  background: url('../images/icons.png') no-repeat -21px -94px;
  top: 50%;
  left: -38px;
  margin-top: -22px;
}

.banner .center-wrap .rightbtn {
  position: absolute;
  width: 28px;
  height: 44px;
  /* 使用精灵图片 */
  background: url('../images/icons.png') no-repeat -21px -29px;
  top: 50%;
  right: -38px;
  margin-top: -22px;
}


.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
  /* 透明度 */
  opacity: 0.6;
}